<template>
	<div class="wrap">
		<!--顶部导航-->
	  	<top-nav title="收藏" ></top-nav>
	  	<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
		  	<ul class="collect-list" v-if="isCollect">
		  		<li v-for="items in collectData" :id="items.collect_circle" @click="onCrlide(items.collect_circle)">
		  			<img :src="items.cate_img|url"/>
		  			<p>{{items.cate_name}}</p>
		  			<span @click.stop="tabCollect(items.collect_circle)">取消收藏</span>
		  		</li>
		  	</ul>
		  	<div class="list-img-pic" v-else>
				<nocontent></nocontent>
			</div>
		</van-pull-refresh>
	</div>
</template>

<script>
	import TopNav from '../../components/commons/top-nav';
	import Nocontent from '@/components/home/no-content';
	import axios from "axios";
	import user from '@/utils/isLogin';
	import qs from 'qs';
	import { PullRefresh } from 'vant';
	export default{
		data(){
			return{
				collectData:{},
				isLoading: false,
				collectTime:null,
				isCollect:true
			}
		},
		components:{
			[PullRefresh.name]:PullRefresh,
			TopNav,
			Nocontent
		},
		filters: {
		  url: function (value) {
		    if (!value) return ''
		    value = user.src + value
		    return value
		  }
		},
		created(){
			
			this.collectTime = function(){
				var collTime = setInterval(()=>{
					var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
					var data = qs.stringify({
					   userid:userId,
					})
					axios({
					   method: 'post',
					   url: user.src + '/index/collect/collect_list',
					   data:data
					})
					.then((res) => {
						
						if(res.data.status == 1011){
							this.isCollect = false;
						}
						if(res.data.status == 200){
							this.collectData = res.data.data;
							this.isCollect = true;
							clearInterval(collTime)
						}
					})
					.catch((error)=> {
					    console.log(error);
					});
				},500)
			}
			
			let plusReady = ()=>{
				var userInfo = JSON.parse(window.localStorage.getItem( 'userInfo' ));
				if(userInfo == undefined || userInfo == null){
					return;
				}else{
					var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
					var data = qs.stringify({
					   userid:userId,
					})
					axios({
					   method: 'post',
					   url: user.src + '/index/collect/collect_list',
					   data:data
					})
					.then((res) => {
						console.log(JSON.stringify(res))
						if(res.data.status == 1011){
							this.isCollect = false;
						}
						if(res.data.status == 200){
							this.collectData = res.data.data;
							this.isCollect = true;
						}
					})
					.catch((error)=> {
					    console.log(error);
					});
					
				}
			}
			if (window.plus) {
		      plusReady();
		   } else {
		      document.addEventListener("plusready", plusReady, false);
		   }
		},
		methods:{
			onCrlide(id){
				plus.nativeUI.showWaiting( "圈子切换中，请稍后..." );
				var home = plus.webview.getWebviewById('home');
				plus.webview.close(home)
				var message = plus.webview.getWebviewById('message');
				plus.webview.close(message)
				var mine = plus.webview.getWebviewById('mine');
				plus.webview.close(mine)
				var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
				axios.post( user.src + '/index/article/save_circle' , {
					userId:userId,
					circleId:id
				})
				.then((res) => {
					if(res.data.status == 1069){	
						plus.webview.getLaunchWebview().reload();
						setTimeout(()=>{
							plus.nativeUI.closeWaiting();
							var collect = plus.webview.getWebviewById('collect');
							plus.webview.close(collect)
							plus.nativeUI.toast('切换成功');
						}, 2000);
					}
				})
				.catch((error)=> {
				    console.log(error);
				});
			},
			//下拉刷新
			onRefresh(){
		      setTimeout(() => {
		        	var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
					if(userId){
						var data = qs.stringify({
						   userid:userId,
						})
						axios({
						   method: 'post',
						   url: user.src + '/index/collect/collect_list',
						   data:data
						})
						.then((res) => {
							if(res.data.status == 1011){
								this.isCollect = false;
							}
							if(res.status == 200){
								this.collectData = res.data.data;
								this.isCollect = true;
							}
						})
						.catch((error)=> {
						    console.log(error);
						});
					}
		        	this.isLoading = false;
		      }, 1200); 
		   },
			tabCollect(id){
				var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
				var data = qs.stringify({
				   userid:userId,
				   circle_id:id
				})
				axios({
				   method: 'post',
				   url: user.src + '/index/collect/collect',
				   data:data
				})
				.then((res) => {
					if(res.data.status == 2001){
						plus.nativeUI.toast("收藏成功");
					}
					if(res.data.status == 1005){
						this.collectTime();
						plus.nativeUI.toast("取消收藏");	
					}
				})
				.catch((error)=> {
				    console.log(error);
				});
			}
		}
	}
</script>

<style lang="less">
	html,body{
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		background: #f6f6f6;
	}
	*{
		margin: 0;
		padding: 0;
	}
	.van-pull-refresh__loading{
		font-size: 26px;
	}
	.van-pull-refresh__text{
		font-size: 26px;
	}
	.collect-list{
		min-height: 1050px;
		overflow: hidden;
		padding: 10px 26px 0px 26px;
		li{
			height: 130px;
			background: #FFFFFF;
			list-style: none;
			margin-bottom: 11px;
			img{
				display: block;
				width: 130px;
				height: 130px;
				float: left;
				border-radius: 10px;
			}
			p{
				float: left;
				margin-left: 40px;
				line-height: 130px;
				font-size: 28px;
			}
			span{
				display: block;
				float: right;
				width: 140px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				font-size: 24px;
				color: #FFFFFF;
				border-radius: 30px;
				background: #00a2ff;
				margin-top: 45px;
				margin-right: 21px;
			}
		}
	}
	.list-img-pic{
		height: 800px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>